<template>
    <div class="page">
        <a-breadcrumb>
        <a-breadcrumb-item @click="router.push({name:'BackendBlogs'})">博客列表</a-breadcrumb-item>
        <a-breadcrumb-item >博客编辑</a-breadcrumb-item>
        </a-breadcrumb>
       <div class="page2">
        <div>
            <a-button type="primary" @click="router.push({name:'EditBlogs'})">创建文章</a-button>
        </div>
        <div >
            <a-input  :style="{width:'320px'}" placeholder="请输入关键字"  
                @press-enter="queryblog" v-model="queryparam.keywords"
            />
        </div>
       </div>
       <div>    
        <a-table :data="data.item" :loading="load" :pagination="false">
            <template #columns>
                <a-table-column title="编号" data-index="id"></a-table-column>
                <a-table-column title="标题" data-index="title"></a-table-column>
                <a-table-column title="作者" data-index="author"></a-table-column>
                <a-table-column title="创建时间" >
                    <template #cell="{record}">
                        {{ dayjs.unix(record.created_at).format('YYYY-MM-DD HH:mm') }}
                    </template>
                </a-table-column>
                <a-table-column title="操作" align="center">
                    <template #cell="{record}">
                        <a-space>
                        <a-button type="primary" size="mini"
                        @click="router.push({name:'EditBlogs',query:{id:record.id}})">
                        编辑
                        </a-button>
                        <a-button type="primary" size="mini">发布</a-button>
                        <a-popconfirm content="你想要删除这篇博客吗?" okText="Yes" cancelText="No" 
                        type="warning"
                        @ok="delblog(record.id)"
                        >
                            <a-button type="primary" size="mini" status="danger"
                            :loading="deleteloading === record.id"
                            >删除</a-button>
                        </a-popconfirm>
                        
                    </a-space>
                    </template>
                </a-table-column>
            </template>
        </a-table>
       </div>
        <div class="page3">
            <a-pagination 
            :total="data.total" 
            :page-size-options="[2,10,20]"
            show-total 
            show-jumper 
            show-page-size 
            @change="onPageNumberChange"
            @page-size-change= "onPageSizeChange" />
        </div>
       
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import {LISTBLOG,DELETEBLOG } from '../../../api/blog'
import { onBeforeMount } from 'vue';
import dayjs from 'dayjs'
import { Message } from '@arco-design/web-vue';

const load = ref(false)
const router = useRouter()
const data = ref({total:0,item:[]})
const queryparam = ref({
    page_size:10,
    page_number:1,
    keywords:''
})

const queryblog = async () =>{
    load.value=true
    try {
        const resp = await LISTBLOG(queryparam.value)
        // console.log(resp)
        // console.log(load)
        data.value=resp
    } finally{
       load.value=false 
    }
     
}

// 分页逻辑
const onPageSizeChange = (pagesize)=>{
    queryparam.value.page_size = pagesize
    queryparam.value.page_number = 1
    queryblog()
}

const onPageNumberChange = (pagenumber)=>{
    queryparam.value.page_number = pagenumber
    queryblog()
}

const deleteloading = ref(0)
const delblog = async (id)=>{
    try {
       await DELETEBLOG(id)
       deleteloading.value = id 
       queryblog()
    } catch (error) {
        Message.error(`删除失败: ${error}`)
    }finally{
        deleteloading.value = 0
    }
}

onBeforeMount(async() =>{
    await queryblog()
})
</script>


<style lang="css" scoped>
.page2{
    display: flex;
    justify-content: space-between;
    margin: 10px 0px;
}

.page3{
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}
</style>